import React from 'react';
import Loadable from 'react-loadable';
import ReactLoading from "react-loading";
import './state.scss';

function refresh() {
    window.location.reload(true);
}

export default function ViewLoadable(loader) {
    return Loadable({
        loader: loader,
        loading: class extends React.Component {
            render() {
                let props = this.props;
                if (props.error) {
                    if(process.env.NODE_ENV !== 'production'){
                        throw props.error;
                    }

                    return (
                        <div className="--loadable-state">
                            <div className={"error"}>
                                {/*todo: 错误时，如断网状态，考虑做点击刷新重新加载*/}
                                <div className="refresh font-size-40" onClick={() => refresh()}>点击重新加载</div>
                            </div>
                        </div>
                    );
                } else if (props.timedOut) {
                    return (
                        <div className="--loadable-state">
                            <div className={"timeout"}>
                                {/*todo: 超时，网络状态不稳定，考虑做点击刷新重新加载*/}

                                <div className="refresh font-size-40" onClick={() => refresh()}>点击重新加载</div>
                            </div>
                        </div>
                    );
                } else if (props.pastDelay) {
                    return (
                        <div className={"loading"}>
                            <div className="box">
                                <ReactLoading type={'spokes'} color="#000"/>
                                <span>正在加载页面...</span>
                            </div>
                        </div>
                    );
                }
                return null;
            }
        },
        delay: 300,
        timeout: 10000,
    });
}